<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Personal page</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="60">
                <p:link outcome="/index" value="Homepage"></p:link>
                | 
                <p:link outcome="/eventPages/createEvent" value="Create a new event"></p:link>
                |
                <h:form>
                    <h:commandLink action="#{loginBean.logout()}" value="Logout"/>
                </h:form>
            </p:layoutUnit>


            <p:layoutUnit position="center" size="175" collapsible="false">
                <p:schedule id="calendar" view="month" aspectRatio="2.2"
                            widgetVar="scheduleWidget"
                            draggable="false" resizable="false"
                            rightHeaderTemplate=""
                            timeZone="GMT+1"
                            value="#{scheduleBean.eventModel}">
                    <p:ajax event="eventSelect" listener="#{scheduleBean.onEventSelect}" 
                            update="eventDetails" 
                            oncomplete="PF('eventDialog').show()"/>
                </p:schedule>

                <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip" resizable="false">
                    <h:form id="eventDetails">
                        <h:panelGrid  columns="2">

                            <p:outputLabel for="nameEdit" value="Name:" rendered="#{scheduleBean.isViewerOwner}"/>
                            <p:inputText id="nameEdit"
                                         label="Name"
                                         required="true"
                                         rendered="#{scheduleBean.isViewerOwner}"
                                         value="#{scheduleBean.event.name}">
                                <f:validateLength minimum="2" maximum="20"></f:validateLength>
                            </p:inputText>

                            <p:outputLabel for="descEdit" value="Description:" rendered="#{scheduleBean.isViewerOwner}"/>
                            <p:inputTextarea id="descEdit"
                                             rows="3" cols="30" counter="display" 
                                             maxlength="140"
                                             rendered="#{scheduleBean.isViewerOwner}"
                                             value="#{scheduleBean.event.description}"
                                             counterTemplate="{0} characters remaining."/>
                            <h:panelGroup rendered="#{scheduleBean.isViewerOwner}"/>
                            <h:outputText id="display" rendered="#{scheduleBean.isViewerOwner}"/>

                            <p:outputLabel for="name" value="Name:" rendered="#{!scheduleBean.isViewerOwner}"></p:outputLabel>
                            <p:outputLabel id="name" value="#{scheduleBean.event.name}" rendered="#{!scheduleBean.isViewerOwner}"/>

                            <p:outputLabel for="description" value="Description:" rendered="#{!scheduleBean.isViewerOwner}"></p:outputLabel>
                            <p:outputLabel id="description" value="#{scheduleBean.event.description}" rendered="#{!scheduleBean.isViewerOwner}"/>

                            <p:outputLabel for="type" value="Type:"></p:outputLabel>
                            <p:outputLabel id="type" value="#{scheduleBean.event.type}"></p:outputLabel>

                            <p:outputLabel for="location" value="City:"></p:outputLabel>
                            <p:outputLabel id="location" value="#{scheduleBean.event.location}"></p:outputLabel>

                            <p:outputLabel for="date" value="Date:" />
                            <p:outputLabel id="date" value="#{scheduleBean.event.eventDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </p:outputLabel>

                            <p:outputLabel for="startingTime" value="Starting time:" />
                            <p:outputLabel id="startingTime" value="#{scheduleBean.event.startingTime}">
                                <f:convertDateTime pattern="HH:mm a" timeZone="GMT+1"/>
                            </p:outputLabel>

                            <p:outputLabel for="endingTime" value="Ending time:" />
                            <p:outputLabel id="endingTime" value="#{scheduleBean.event.endingTime}">
                                <f:convertDateTime pattern="HH:mm a" timeZone="GMT+1"/>
                            </p:outputLabel>

                            <p:outputLabel for="guests" value="Invited users:"></p:outputLabel>
                            <p:outputLabel id="guests" value="#{scheduleBean.event.invitedUsers}"></p:outputLabel>

                            <p:outputLabel for="participants" value="Participants:"></p:outputLabel>
                            <p:outputLabel id="participants" value="#{scheduleBean.event.attendingUsers}"></p:outputLabel>

                            <p:outputLabel for="weather" value="Weather:"></p:outputLabel>
                            <p:outputLabel id="weather" value="#{scheduleBean.event.weather}"></p:outputLabel>

                            <p:commandButton id="submit" value="Update"
                                             rendered="#{scheduleBean.isViewerOwner}"
                                             actionListener="#{scheduleBean.updateEvent()}"
                                             oncomplete="PF('scheduleWidget').update();PF('eventDialog').hide();javascript:window.location.reload()" />

                            <p:commandButton id="deleteButton" value="Delete" 
                                             rendered="#{scheduleBean.isViewerOwner}"
                                             actionListener="#{scheduleBean.deleteEvent()}"
                                             oncomplete="PF('scheduleWidget').update();PF('eventDialog').hide();javascript:window.location.reload()">
                                <p:confirm header="Confirm event deletion" message="This operation cannot be undone!"/>
                            </p:commandButton>

                            <p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
                                <p:commandButton value="Delete!" styleClass="ui-confirmdialog-yes" type="button"/>
                                <p:commandButton value="Cancel" styleClass="ui-confirmdialog-no" type="button" />
                            </p:confirmDialog>

                        </h:panelGrid>
                    </h:form>
                </p:dialog>
            </p:layoutUnit>

            <p:layoutUnit position="east" size="200">
                <p:dataList 
                    var="notification"
                    widgetVar="notificationList"
                    paginator="true" paginatorAlwaysVisible="false"
                    itemType="none"
                    emptyMessage="No new notifications"
                    value="#{notificationBean.pendingNotifications}">
                    <f:facet name="header">
                        Notifications
                    </f:facet>

                    <p:commandLink 
                        update=":notificationDetails"
                        oncomplete="PF('notificationDialog').show()" title="View Details" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">
                        <f:setPropertyActionListener value="#{notification}" target="#{notificationBean.selectedNotification}"/>
                    </p:commandLink>
                    <p:outputLabel value="#{notification.message}" style="font-size: smaller"/>

                </p:dataList>


                <p:dialog widgetVar="notificationDialog" header="Details" showEffect="clip" hideEffect="clip" resizable="false">
                    <h:form id="notificationDetails">
                        <h:panelGrid  columns="2">

                            <p:outputLabel value="#{notificationBean.selectedNotification.details}"/>
                            <br/>

                            <p:commandButton id="accept" value="Accept invite"
                                             rendered="#{notificationBean.selectedNotification.isInvite}"
                                             actionListener="#{notificationBean.acceptInvite()}"
                                             oncomplete="javascript:window.location.reload()"
                                             update="@all"/>
                            <br/>
                            <p:commandButton id="decline" value="Decline invite" 
                                             rendered="#{notificationBean.selectedNotification.isInvite}"
                                             actionListener="#{notificationBean.declineInvite()}"
                                             oncomplete="javascript:window.location.reload()"
                                             update="@all" />

                            <p:commandButton id="markasread" value="Mark as read" 
                                             rendered="#{!notificationBean.selectedNotification.isInvite}"
                                             actionListener="#{notificationBean.markAsRead()}"
                                             oncomplete="javascript:window.location.reload()"
                                             update="@all"/>

                        </h:panelGrid>
                    </h:form>
                </p:dialog>
            </p:layoutUnit>   
        </p:layout>
    </h:body>
</html>

